<!DOCTYPE html>
<html>
<head>
  <!-- Required meta tags-->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <!-- Your app title -->
  <title>My App</title>
  <!-- 使用bootcdn进行在线加速 -->
  <link href="https://cdn.bootcss.com/framework7/4.2.2/css/framework7.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/framework7/4.2.2/css/framework7.bundle.min.css" rel="stylesheet">
  <!-- 本地示例运行请参考：https://blog.csdn.net/qq_38815953/article/details/81984863 -->
</head>
<body>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">消息列表</div>
      </div>
    </div>
    <div class="toolbar messagebar">
      <div class="toolbar-inner">
        <div class="messagebar-area">
          <textarea class="resizable" placeholder="输入"></textarea>
        </div><a class="link send-link" href="#">发送</a>
      </div>
    </div>
    <div class="page-content messages-content">
      <div class="messages">
        <!-- 消息标题，初始化为时间 -->
        <div class="messages-title" id="messages-title_top"></div>
        <!-- 完整的发送消息布局 -->
        <!-- <div class="message message-sent">
          <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-7.jpg);"></div>
          <div class="message-content">
            <div class="message-name">约翰</div>
            <div class="message-header">消息头</div>
            <div class="message-bubble">
              <div class="message-text-header">消息描述</div>
              <div class="message-text">苍茫的天涯是我的爱.</div>
              <div class="message-text-footer">注脚</div>
            </div>
            <div class="message-footer">消息脚</div>
          </div>
        </div> -->
        <!-- 完整接收布局消息 -->
        <div class="message message-received">
          <div class="message-avatar" style="background-image:url(https://lvlvfeng.gitee.io/lvblog/images/head.png);"></div>
          <div class="message-content">
            <div class="message-name">菲菲</div>
            <div class="message-bubble">
              <div class="message-text">Hello，我是潜伏在绿绿峰网页里的智能客服菲菲，今天咱们唠点啥尼？</div>
            </div>
            <div class="message-footer">自动回复</div>
          </div>
        </div>        
        <!-- 一个图片消息示例 -->
        <!-- <div class="message message-sent">
          <div class="message-content">
            <div class="message-bubble">
              <div class="message-image"><img src="https://cdn.framework7.io/placeholder/cats-200x260-4.jpg" style="width:200px; height: 260px;"></div>
              </div>
            </div>
          </div> -->
          


        </div>
      </div>
    </div>
    <!-- 主js文件和web支持 -->
    <script src="https://cdn.bootcss.com/framework7/4.2.2/js/framework7.min.js"></script>
    <script src="https://cdn.bootcss.com/framework7/4.2.2/js/framework7.bundle.min.js"></script>
    <!-- jq -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function(){
      var date = new Date();
      $('#messages-title_top').text(date.toLocaleString());
    });

    // app初始化
    var app = new Framework7();

    var $$ = Dom7;  //为了防止与jq冲突，实际上，借助framework7的dom操作与jq一样

    // 初始化消息对象
    var messages = app.messages.create({
      el: '.messages',

      // 第一条消息规则
      firstMessageRule: function(message, previousMessage, nextMessage) {
        // 跳过标题
        if (message.isTitle) return false;
        /* if:
          - 如果之前没有消息
          - 或以前的消息类型（发送/接收）不同
          - 或者以前的邮件发件人名称不同
        */
        if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
        return false;
      },
      // Last message rule
      lastMessageRule: function(message, previousMessage, nextMessage) {
        // Skip if title
        if (message.isTitle) return false;
        /* if:
          - there is no next message
          - or next message type (send/received) is different
          - or next message sender name is different
        */
        if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
        return false;
      },
      // Last message rule
      tailMessageRule: function(message, previousMessage, nextMessage) {
        // Skip if title
        if (message.isTitle) return false;
        /* if (bascially same as lastMessageRule):
      - there is no next message
      - or next message type (send/received) is different
      - or next message sender name is different
    */
        if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
        return false;
      }
    });

    // 初始化消息栏
    var messagebar = app.messagebar.create({
      el: '.messagebar'
    });

    // 响应
    var responseInProgress = false;
    var msg_info = "";    // 全局保存发送消息
    // 发送消息
    $$('.send-link').on('click', function() {
      var text = messagebar.getValue().replace(/\n/g, '<br>').trim();
      // 空消息返回不做处理
      if (!text.length) return;
      msg_info = text;
      // 发送成功则清除描述
      messagebar.clear();

      // 将焦点返回到区域
      messagebar.focus();

      // 向邮件添加邮件
      messages.addMessage({
        text: text,
      });

      if (responseInProgress) return;
      // 接收虚拟消息
      receiveMessage();
    });
// 随机生成虚拟消息
    function receiveMessage() {
      responseInProgress = true;
      setTimeout(function() {
        // 得到随机答案和随机人

        // 显示载入指示
        messages.showTyping({
          header: '菲菲 正在输入',
          avatar: 'https://lvlvfeng.gitee.io/lvblog/images/head.png'
        });
        // 向我的服务器发起ajax请求
        var url = "http://www.lvlvfeng.top:8088/talk/520" + "?msg=" + msg_info;
          $.ajax({
            type: 'get',
            url: url,
            success: function(data){
              console.log(data);
              messages.addMessage({
                text: data.content,
                type: 'received',
                name: '菲菲',
                avatar: 'https://lvlvfeng.gitee.io/lvblog/images/head.png'
              });
              // 隐藏输入指示
              messages.hideTyping();
              responseInProgress = false;
            },
            error: function(data){
              // console.log(data);
            }
          });
        setTimeout(function() {
          // 添加接收到的虚拟消息
          // messages.addMessage({
          //   text: "我是菲菲啊，回复你了",
          //   type: 'received',
          //   name: '菲菲',
          //   avatar: 'https://lvlvfeng.gitee.io/lvblog/images/head.png'
          // });
          // // 隐藏输入指示
          // messages.hideTyping();
          // responseInProgress = false;
        }, 4000);
      }, 1000);
    }
    </script>
</body>

</html>
